$(function () {
    var data = {}
    $('#yz').on('click', function (e) {
        console.log(12);
        /* 必须输入用户名和密码 不然无法进行校验 */
        if (!$('#form-login input[name=username]').val().trim() || !$('#form-login input[name=password]').val().trim()) return layui.layer.msg('请输入用户名和密码', {
            icon: 5
        })
        login()
    })

    function login() {
        QVerify({
            name: "人机验证", // 验证面板标题
            desc: "滑动滑块，使图片显示角度为正", // 验证操作提示文字
            cloneTxt: "点我关闭", // 关闭验证面板文字
            successTxt: "验证成功，{0}秒后自动关闭", // {0}必须有，延迟关闭时间显示
            errorTxt: "验证失败，请重试",
            images: [
                "assets/images/t1.png",
                "assets/images/t2.png",
                "assets/images/t3.png"
            ], // 图片数组 将会随机从里面选取一张
            duration: 2, //定时关闭时间 默认 2
            mountDiv: "#QVerify", // 装载div 默认 #QVerify
            slideDifference: 15, // 滑动误差值 默认 5
            defaultDifference: 50, // 默认图片角度最小差值 默认 50
            mousedown: function (e) { // 按下鼠标事件
                // e: 元素本身
                // console.log('按下了鼠标');
            },
            mousemove: function (e, moveWidth) { // 移动鼠标事件
                // e: 元素本身
                // moveWidth: 移动距离
                // console.log("移动了鼠标");
                // console.log(moveWidth);
            },
            mouseup: function (e, moveWidth) { // 抬起鼠标事件
                // e: 元素本身
                // moveWidth: 移动距离
                // console.log("抬起了鼠标");
                console.log(moveWidth);
            },
            success: function () { // 验证成功事件
                console.log("验证成功");
                data.username = $('#form-login input[name=username]').val().trim()
                data.password = $('#form-login input[name=password]').val().trim()

            },
            fail: function () { // 验证失败事件
                console.log("验证失败");
            },
            complete: function () { // 验证完成事件 成功失败都会执行(执行顺序: complete->success 或 complete->fail)
                console.log("触发验证");
            },
            clone: function () { // 关闭验证面板事件
                $.ajax({
                    method: 'post',
                    url: '/api/login',
                    data,
                    success(res) {
                        console.log(res);
                        // 判断
                        if (res.status !== 0) {
                            return layui.layer.msg(res.message, {
                                icon: 5
                            })
                        }
                        layui.layer.msg(res.message, {
                            icon: 6
                        }, function () {
                            // 保存token到本地存储中
                            localStorage.setItem('token', res.token)
                            // 跳转到新闻页面
                            location.href = 'index.html'
                        })


                    }
                })
            }
        });
    };


    // 粒子效果
    $('#particles').particleground({
        dotColor: '#7ec7fd',
        lineColor: '#7ec7fd'
    });

    /* 自定义表单校验规则 */
    // console.log(layui);.
    layui.form.verify({
        // 规则名称：规则定义
        pwd: [
            /^\S{5,12}$/,
            '密码必须是5-12位的非空字符'
        ],

    })

    /* 效果1 登录和注册表单的切换*/
    //单击去注册 显示注册表单 隐藏登陆表单
    $('#link_reg').on('click', function () {
        $('#reg-box').show()
        $('#login-box').hide()
    })

    //单击去登录 显示登录表单 隐藏注册表单
    $('#link_login').on('click', function () {
        $('#login-box').show()
        $('#reg-box').hide()
    })

    /* 效果2 ：注册功能 */
    // 表单注册submit事件
    $('#form_reg').on('submit', function (e) {
        //阻止默认行为
        e.preventDefault()
        // console.log('ok');
        // 收集数据(属性选择器) 标签[属性]
        var username = $('#form_reg input[name=username]').val().trim()
        var password = $('#form_reg input[name=password]').val().trim()
        var repassword = $('#form_reg input[name=repassword]').val().trim()
        // 校验数据
        console.log(username, password, repassword);
        // 调接口  完成注册功能
        $.ajax({
            method: 'post',
            url: '/api/reguser',
            data: {
                username: username,
                // 属性和属性值一样 可以简写
                password
            },
            success(res) {
                console.log(res);
                if (res.status !== 0) {
                    return layui.layer.msg(res.message, {
                        icon: 5
                    })
                }

                layui.layer.msg(res.message, {
                    icon: 6
                }, function () {
                    $('#form_reg input[name=username]').val('')
                    $('#form_reg input[name=password]').val('')
                    $('#form_reg input[name=repassword]').val('')
                    // 显示登陆表单（触发'去登陆'按钮的click事件）
                    $('#link_login').click()
                })
            }
        })



    })
    // alert('ok')
    /* 效果3 登录功能 */
    // $('#form-login').on('submit', function (e) {
    //     e.preventDefault()
    //     var data = $(this).serialize()
    //     // console.log(data);
    //     // 调接口 登录
    //     $.ajax({
    //         method: 'post',
    //         url: '/api/login',
    //         data,
    //         success(res) {
    //             console.log(res);
    //             // 判断
    //             if (res.status !== 0) {
    //                 return layui.layer.msg(res.message, {
    //                     icon: 5
    //                 })
    //             }
    //             layui.layer.msg(res.message, {
    //                 icon: 6
    //             }, function () {
    //                 // 保存token到本地存储中
    //                 localStorage.setItem('token', res.token)
    //                 // 跳转到新闻页面
    //                 location.href = 'index.html'
    //             })


    //         }
    //     })

    // })
})